<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>购物车</h1>
<div>商品数量 5</div>
<table>
    <thead>
        <tr>
            <th>图片</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr class="tr">
            <td>1</td>
            <td>苹果</td>
            <td>¥<span>29.9</span></td>
            <td><input type="text"class="num" value="1"></td>
            <td>¥<span></span></td>
            <td class="del">删除</td>
        </tr>
        <tr class="tr">
            <td>1</td>
            <td>梨</td>
            <td>¥<span>23.9</span></td>
            <td><input type="text" class="num" value="2"></td>
            <td>¥<span></span></td>
            <td class="del">删除</td>
        </tr>
    </tbody>

</table>
<div><span id="allcount"></span></div>


<script>

    function s() {
        let tr = document.querySelectorAll('.tr')
        let allcount = document.querySelector('#allcount')
        let allcountNum = 0
        for(let i =0;i < tr.length;i++){
            var price = tr[i].children[2].children[0].innerHTML;
            var num = tr[i].children[3].children[0].value;
            var count = tr[i].children[4].children[0].innerHTML = (price * num).toFixed(2);

            allcountNum += Number(count)
        }
        allcount.innerHTML = allcountNum.toFixed(2)

    }

 s()

    let ipt = document.querySelectorAll('.num')

    for(let j = 0;j < ipt.length;j++){
        ipt[j].addEventListener('change',s)
    }

    let del = document.querySelectorAll('.del')
    for(let k= 0;k < del.length;k++){
        del[k].addEventListener('click',function () {
            var tbody = document.querySelector('tbody')
            tbody.removeChild(this.parentNode)
            s()
        })
    }


</script>
</body>
</html>